<script lang="ts" setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import conf from "@/conf/conf";
// 日志接口，定义日志对象的结构
interface Log {
  id: string;
  logContent: string;
  logTime: string;
}
const total = ref(); // 日志总条数
// 根据日志内容决定表格行的样式
const tableRowClassName = ({ row }: { row: Log }) => {
  const rowType = row.logContent.substring(0, 2);
  if (rowType === "添加") {
    return "success-row";
  } else if (rowType === "删除") {
    return "danger-row";
  } else if (rowType === "修改") {
    return "warning-row";
  }
  return "";
};

const tableData = ref<Log[]>();
/**
 * 切换页面并更新要显示的数据
 * @param page - 当前页面的页码
 */
onMounted(() => {
  fetchData(1);
});
/**
 * 从服务器获取数据
 */
const fetchData = (number: number) => {
    axios({
      url: `${conf.url}/record`,
      params: {
        pageNum: number
      },
      method: "GET"
    }).then((res) => {
      let data = res.data.data;
      total.value = data.total; 
      tableData.value = data.items;
    }).catch((err) => {
      console.log(err);
    })
};

</script>
<template>
  <div class="log">
    <h1>操作日志</h1>
  </div>
  <el-table
    :data="tableData"
    style="width: 77%;height: 70vh; margin: auto;overflow: scroll;"
    :row-class-name="tableRowClassName"
    align="center"
    border
    :cell-border="true"
  >
    <el-table-column
      prop="id"
      label="日志编号"
      width="100"
      align="center"
    />
    <el-table-column
      prop="logContent"
      label="日志信息"
      width="450"
      align="center"         
    />
    <el-table-column
      prop="logTime"
      label="操作时间"
      width="450"
      align="center"      
    />
  </el-table>
      <el-pagination
    background
    layout="total,prev, pager, next"
    :total="total"
    :page-size="12"
    limit="5"
    next-text="下一页"
    prev-text="上一页"
    @update:current-page="fetchData"
    style=" justify-content: center; height: 50px; "
  />
</template>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.el-table .danger-row {
  --el-table-tr-bg-color: var(--el-color-danger-light-9);
}
</style>
<style scoped>
 
.log {
  text-align: center;
}
.pagination {
  position: relative;
  bottom: 0px;
  justify-content: center;
  display: flex;
  align-items: center;
  margin: 0 auto;
  width: 77%;
  height: 50px;
}
</style>
